<template>
    <div>
        <p class="tip">由于微信限制下载<br>请先点击复制链接按钮<br>再通过其他浏览器打开链接进行下载<br>
        <x-button
            mini="mini"
            type="primary"
            v-clipboard:copy="url"
            v-clipboard:success="onCopy">点击复制链接</x-button>
        </p>
        <a
            :href="item.link"
            download="download"
            v-for="(item, index) in this.downloadArray"
            class="download-item">&nbsp;</a>
    </div>
</template>

        <script>
            import {XButton} from 'vux';
            import {Util} from '@/js/Util';
            import {setInterval} from 'timers';
            export default {
                components: {
                    XButton
                },
                data() {
                    return {downloadArray: [], url: location.href};
                },
                methods: {
                    download() {
                        // 获取参数
                        let query = this.$route.query.q,
                            action = this.$route.query.a,
                            config = {
                                headers: {
                                    'Content-Type': 'application/json'
                                }
                            };
                        // 0 - 图片 1 - 视频
                        switch (action) {
                            case 'photo':
                                action = 0;
                                break;
                            case 'video':
                                action = 1;
                                break;
                        }
                        query instanceof Array
                            ? query
                            : (query = [query]);
                        let data = JSON.stringify({type: action, ids: query});
                        // 获取下载链接
                        this
                            .$http
                            .post('team/GetResourceById/v1', data, config)
                            .then(response => {
                                let result = response.data;
                                this.downloadArray = result.data;
                                setTimeout(function() {
                                    var items = document.getElementsByClassName('download-item');
                                    for(var i = 0;i < items.length;i++) {
                                        var e = document.createEvent("MouseEvents");
                                        e.initEvent("click", true, true);
                                        items[i].dispatchEvent(e);
                                    }
                                }, 2000);
                                // document.getElementsByClassName('download-a').click;
                            }, response => {
                                Util.errorWarning(this);
                            });
                    },
                    onCopy() {
                        this.$vux.toast.text('已复制到剪贴板', 'bottom');
                    },
                    changeImg: (domImg, filename) => {
                        // 创建隐藏的可下载链接
                        var eleLink = document.createElement('a');
                        eleLink.download = filename;
                        eleLink.style.display = 'none';
                        // 图片转base64地址
                        var canvas = document.createElement('canvas');
                        var context = canvas.getContext('2d');
                        var width = domImg.natureWidth;
                        var height = domImg.natureHeight;
                        context.drawImage(domImg, 0, 0);
                        // 如果是PNG图片，则context.toDataURL('image/png')
                        eleLink.href = context.toDataURL('image/jpeg');
                        // 触发点击
                        document.body.appendChild(eleLink);
                        eleLink.click();
                        // 然后移除
                        document.body.removeChild(eleLink);
                    }
                },
                mounted() {
                    this.download();
                }
            };
        </script>

        <style lang="less" scoped="scoped">
            .tip {
                font-size: 1.6rem;
                text-align: center;
                display: block;
                position: absolute;
                top: 40%;
                left: 0;
                right: 0;
            }
        </style>